<template>
  <div ref="lineChartRef" :style="{ width, height }"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watchEffect } from 'vue'
import useEcharts from '@/hooks/web/useEcharts'
import { EChartsOption } from 'echarts'

export default defineComponent({
  name: 'LineChart',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    }
  },
  setup() {
    const lineChartRef = ref<HTMLElement>()

    onMounted(() => {
      const { setOptions, echarts } = useEcharts(lineChartRef.value!)

      const options: EChartsOption = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'July',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
          ],
          axisTick: {
            show: true
          }
        },
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            }
          }
        ],
        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
        series: [
          {
            data: [140, 180, 150, 205, 160, 295, 125, 255, 205, 305, 240, 295],
            type: 'line',
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 5,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#DD86F2'
                },
                {
                  offset: 1,
                  color: '#7869F0'
                }
              ]),
              shadowColor: '#D2D0D7',
              shadowBlur: 10,
              shadowOffsetY: 20
            },
            itemStyle: {
              color: '#A977F1',
              borderColor: '#A977F1'
            }
          }
        ]
      }

      watchEffect(() => {
        setOptions(options)
      })
    })

    return {
      lineChartRef
    }
  }
})
</script>

<style scoped></style>
